<!-- 新增文章弹窗 -->
<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
// 编辑器
import WangEditor from '@/components/WangEditor/index.vue'
import type { UploadProps } from 'element-plus'
import type { IArticleAddRequest } from '@/api/interface/article'

defineOptions({
  name: 'AddArticleDialog',
})

const emit = defineEmits<{
  (e: 'submit', form: IArticleAddRequest): void
}>()

const visible = ref(false)
const editorRef = ref<InstanceType<typeof WangEditor>>()
const form = reactive<IArticleAddRequest>({
  title: '',
  content: '',
  summary: '',
  coverImage: '',
  isCommentEnabled: '1',
  isTop: '0',
  recommendWeight: '',
})

const handleImageSuccess: UploadProps['onSuccess'] = (response) => {
  form.coverImage = response.data.url
}

const handleSubmit = () => {
  form.content = editorRef.value?.getContent() || ''
  emit('submit', form)
}

// 向外暴露可调用方法
defineExpose({
  open: () => {
    visible.value = true
  },
  // 关闭弹窗
  close: () => {
    visible.value = false
  },
  // 重置对象为默认值
  reset: () => {
    Object.assign(form, {
      title: '',
      content: '',
      summary: '',
      coverImage: '',
      isCommentEnabled: '1',
      isTop: '0',
      recommendWeight: '0',
    })
    nextTick(() => {
      editorRef.value?.setContent('')
    })
  },
})
</script>

<template>
  <ElDialog v-model="visible" title="新增文章" width="60%">
    <ElForm :model="form" label-width="100px">
      <ElFormItem label="标题">
        <ElInput v-model="form.title" placeholder="请输入标题" />
      </ElFormItem>
      <ElFormItem label="摘要">
        <ElInput v-model="form.summary" placeholder="请输入摘要(可填)" />
      </ElFormItem>
      <ElFormItem label="封面图片">
        <ElUpload
          class="avatar-uploader"
          action="/api/upload/qn"
          :show-file-list="false"
          :on-success="handleImageSuccess"
        >
          <img v-if="form.coverImage" :src="form.coverImage" class="avatar" />
          <ElIcon v-else class="avatar-uploader-icon">
            <Plus />
          </ElIcon>
        </ElUpload>
      </ElFormItem>
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="是否置顶">
            <ElSwitch
              v-model="form.isTop"
              :active-value="'1'"
              :inactive-value="'0'"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="是否开启评论">
            <ElSwitch
              v-model="form.isCommentEnabled"
              :active-value="'1'"
              :inactive-value="'0'"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElFormItem label="推荐权重">
        <ElInput
          v-model="form.recommendWeight"
          placeholder="请输入推荐权重(1-100)"
        />
      </ElFormItem>
      <ElFormItem label="正文">
        <WangEditor ref="editorRef" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="visible = false">取消</ElButton>
      <ElButton type="primary" @click="handleSubmit">提交</ElButton>
    </template>
  </ElDialog>
</template>

<style scoped lang="scss">
.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
